<template>
	<el-dialog :title="data.isEdit?'修改':'新增'" :visible.sync="data.dialogFormVisible" append-to-body width="640px" @open='open'
	 :before-close="close">

		<el-form :model="data.form" ref='addInfo'>
			<el-form-item label="用户名:" :label-width="data.formLabelWidth" prop='username' >
				<el-input v-model='data.form.username' placeholder='请输入用户名'></el-input>
			</el-form-item>
			<el-form-item label="密码:" :label-width="data.formLabelWidth" prop='password' v-if='!data.isEdit'>
				<el-input v-model='data.form.password' placeholder='请输入密码' type='password'></el-input>
			</el-form-item>
			<el-form-item label="姓名:" :label-width="data.formLabelWidth" prop='truename'>
				<el-input v-model='data.form.truename'  placeholder='请输入姓名:'></el-input>
			</el-form-item>
			<el-form-item label="手机号:" :label-width="data.formLabelWidth" prop='phone' >
				<el-input v-model='data.form.phone' placeholder='请输入手机号'></el-input>
			</el-form-item>
			<el-form-item label="地区:" :label-width="data.formLabelWidth" prop='region'>
				<CityPicker :cityPickerData.sync='data.form.region' :cityPickerLevel="['province','city','area']"></CityPicker>
			</el-form-item>
			<el-form-item label="是否启用:" :label-width="data.formLabelWidth" prop='content' >
				<el-radio v-model='data.form.status' label="1">禁用</el-radio>
				<el-radio v-model='data.form.status' label="2">启用</el-radio>
			</el-form-item>
			<el-form-item label="角色:" :label-width="data.formLabelWidth" prop='content'>
				<el-checkbox-group v-model="data.form.role">
					<el-checkbox :label="item.role"   v-for="item in data.roleData" :key='item.role'>
						{{item.name}}
					</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			
			<!-- 按钮 -->
			<el-form-item label="按钮:" :label-width="data.formLabelWidth" >
				<template  v-for='(i,idx) in data.btnData'>
					<h4>{{i.name}}</h4>
					<el-checkbox-group v-model="data.form.btnPerm"  :key='idx' v-if='data.btnData.length>0'>
						<template  v-if='i.perm.length>0'>
							<el-checkbox :label="item.value"   v-for="item in i.perm" :key='item.role'>
								{{item.name}}
							</el-checkbox>
						</template>
					</el-checkbox-group>
				</template>
				
			</el-form-item>
		
			
		</el-form>
	
		
		
		<div slot="footer" class="dialog-footer">
			<el-button @click="close">取 消</el-button>
			<el-button type="primary" @click="sure" :loading='data.isloading'>确 定</el-button>
		</div>

	</el-dialog>
</template>

<script>
	import {
		reactive,
		ref,
		watch,
		watchEffect
	} from '@vue/composition-api';
	import {
		add,
		editInfo,
		role,
		userAdd,
		editUser,
		userRole,
		permButton
	} from '@/api/news.js'
	import CityPicker from '@/components/CityPicker'
	import sha1 from 'js-sha1'
	import emitter from '@/utils/bus.js'
	export default {
		name: 'info',
		components: {
			CityPicker
		},
		props: {
			flag: {
				type: Boolean,
				default: false
			},
			editObj:{
				type:Object,
				default:()=>{}
			}
		},
		setup(props, {
			emit,
			root,
			refs
		}) {

			// data
			const data = reactive({
				formLabelWidth: '80px',
				form: {
					username: '1293@qq.com',
					truename: 'liwei',
					password: 'cb123456',
					phone:18223035771,
					region: {}, //反向修改--为了拿到组件里面的值 
					status: '1',
					role: [], //需要转成字符串 splice
					btnPerm:[]
				},
				roleData:[], //角色数据
				dialogFormVisible: false,
				isEdit:false,
				btnData:[]
			})
			// watch
			watchEffect(() => {
				data.dialogFormVisible = props.flag
			})
			watch(()=>props.editObj,(val)=>{
				for(let key in val){
					if(key === 'region'){
						// console.log(val[key])
						continue
					}
					if(key ==='role'||key==='btnPerm'){
						data.form[key]=val[key].split(',')
						continue;
					}
					data.form[key]=val[key]
				}
			    data.isEdit =val.isEdit
			})
			
			// methods
			const close = () => {
				// 初始化数据 
				// refs['addInfo'].resetFields()
				for (let key in data.form){
					if(key==='region'){
						data.form[key]={}
						continue;
					}
					if(key==='role'){
						data.form[key]=[]
						continue;
					}
					data.form[key]=''
				}
				
				// 关闭弹窗
				data.dialogFormVisible = false
				emit('update:flag', false)
			}
			const open = () => {
				getRole(),
				getBtn()
			}
			const addUser =async ()=>{
				// 表单验证我也没做了--判断是否为空，是否符合规则-正则！！！
				let requestData = JSON.parse(JSON.stringify(data.form))
				requestData.role = requestData.role.join()
				requestData.btnPerm = requestData.btnPerm.join()
				requestData.password = sha1(requestData.password)
				console.log(requestData)

				const res = await userAdd(requestData)
				if(res.resCode===0){
					root.$message.success('添加成功')
					emitter.emit('updata')
					close()
				}
			}
			const sure =async () => {
				if(!data.isEdit){
					addUser()
					return
				}
				// 修改 
				let requestData = JSON.parse(JSON.stringify(data.form))
				requestData.role = requestData.role.join()
				requestData.btnPerm = requestData.btnPerm.join()
				const res = await editUser(requestData)
				if(res.resCode===0){
					root.$message.success('添加成功')
					emitter.emit('updata')
					close()
				}
			}
			
			// 获取角色数据 
			const getRole = async () => {
				// const res = await userRole()
				const res = await role()
				data.roleData = res.data
				// sale technician manager
			}
			
			// 获取按钮权限数据
			const getBtn = async ()=>{
				 const res = await permButton()
				   data.btnData = res.data
				
				}

			return {
				data,
				close,
				open,
				sure
			}
		}
	}
</script>

<style>
</style>
